<template>
  <div>
    <a-row>
      <a-col :span="12"  class='mb20'>
          <a-input  placeholder="请输入名称"  style='width:200px'  v-model='search.keyWord'/>
          <a-button type="primary" @click='pageInit()'>搜索</a-button>
      </a-col>
    </a-row>
   
    <a-table :columns="columns" :dataSource="data"  :pagination="pagination"   @change="handleTableChange"> 
      <span slot="more"  slot-scope="text, record">
        
      </span> 
      <span slot="createTime"  slot-scope="text, record">{{text | formatDate}}</span> 
       
      <span slot="more" slot-scope="text, record"> 
        <a-button size='small' @click='checkMessage(record.code)'>查看</a-button> 
      </span>
    </a-table>
    <customerModal  ref='customer_Modal' :visible='showcustomerModal'  v-on:handleCancel='showcustomerModal=false'  v-on:handleOk='showcustomerModal=false'></customerModal>
  </div>
</template>

<script>
import { customer_of_oliaviaList }  from '@/api/system/index'
import customerModal  from '@/components/system/customer_of_olivia/index'
const  columns  = [
      {
        dataIndex: 'name',
        key: 'name',
        title:'姓名', 
      }, {
        title: '公司名称',
        dataIndex: 'companyName',
      }, {
        title: '邮箱',
        dataIndex: 'eamil',
      }, {
        title: '电话',
        dataIndex: 'phone', 
      },{
        title: '留言&相关文件',
        dataIndex: 'more', 
        scopedSlots:{ customRender :'more' },
        width:150
      }, {
        title: '创建时间',
        dataIndex: 'createTime',
        scopedSlots:{ customRender :'createTime'  } 
      },
      // {
      //   title: '操作',
      //   dataIndex: 'action',
      //   scopedSlots: { customRender: 'action' },
      // },
      ]
export default {
  name: 'customerFromOlivia',
  data () {
    return {
        columns,
        showcustomerModal:false,
        data:[
          {name:'ssss'}
        ],
        search:{
          keyWord:'',
          pageSize:10,
          pageNo:1
        },
        pagination:{
          total:0,
          pageSize: 10,//每页中显示10条数据
          showSizeChanger: true,

          pageSizeOptions: ["10", "20"],//每页中显示的数据
          showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
        },  
    }
  },
  created(){
    this.pageInit()
  },
  methods:{
    pageInit(){
      customer_of_oliaviaList(this.search).then((res)=>{
        if(res.data.flag == true){
          this.data = res.data.dataList
          this.pagination.total = res.data.totalRs
        }
      })
    },
    checkMessage(code){
      this.showcustomerModal = true
      this.$refs.customer_Modal.$emit('openDialog',code)
    },
    handleTableChange (pagination, filters, sorter) {
        // console.log(pagination);
        this.search.pageNo = pagination.current
        this.search.pageSize =pagination.pageSize
        this.pageInit()
    },
  },
  computed:{
    
  },
  components:{
    customerModal
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
